<script lang="ts" setup>
import { useFetchYrRefs } from "../hooks/useFetchYr";

// import { useFetchDateList } from "../hooks/useFetchDateList";
// const route = useRoute();
// const year = route.query.year;
// const { dateList } = useFetchDateList(year as string | null);
// console.log(dateList);
const emit = defineEmits(["update:curYear"]);
const show = ref(false);
const { curYear } = useFetchYrRefs();

function toggleShow() {
  show.value = !show.value;
}
defineExpose({
  toggleShow
});

function handleClick(year: string | number, idx: number) {
  show.value = false;
  curYear.value = year.toString();
  emit("update:curYear", year.toString(), idx);
}
const { yearList } = useFetchYrRefs();
// console.log(yearList);
</script>
<template>
  <div>
    <div v-if="show" class="absolute top-27 left-0 w-full">
      <ul
        class="h-180 overflow-y-scroll shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)]"
      >
        <li
          class="h-40 center bg-[#fff] b-b-1 b-b-solid b-b-[#e5e5e5] last-of-type:b-b-none"
          v-for="(year, idx) in yearList"
          :key="idx"
          @click.stop="handleClick(year, idx)"
        >
          <span>{{ year }}</span>
        </li>
      </ul>
    </div>
    {{ curYear }}
  </div>
</template>
